import React, { Component } from 'react';
import { Card, Form, DatePicker, Input, Button, message } from 'antd';
import moment from 'moment';
// import qs from 'qs';
import { addDriver, getDriverDetail0 as getDriverDetail } from 'Services/hu.js';

const FormItem = Form.Item;
const { MonthPicker } = DatePicker;
const { TextArea } = Input;

@Form.create()
export default class driverDetails extends Component {
  constructor(props) {
    super(props);
    window.scope = this;
  }

  state = {
    // list: {},
    id: '',
  };

  componentDidMount() {
    this.getDriverData();
  }

  getDriverData = async () => {
    // const { id } = this;
    // if (type === 'add') return false;
    const { setFieldsValue } = this.props.form;
    const res = await getDriverDetail();
    // this.setState({ list: res.data });
    const obj = res.data;
    obj.age = moment(obj.age);
    setFieldsValue(obj);
    this.setState({ id: obj.id });
  };

  // id = '1';
  // id = qs.parse(this.props.location.search.substr(1)).id;

  // type = this.props.match.params.type;

  handleSubmit = e => {
    e.preventDefault();
    const { validateFields } = this.props.form;
    validateFields((err, value) => {
      if (err) return false;
      const data = {
        ...value,
        age: value.age.format('YYYY-MM'),
      };
      data.id = this.state.id;
      addDriver(data).then(() => {
        message.success('成功');
        // this.props.history.replace('/publicTransport/driver');
      });
    });
  };

  render() {
    const title = `司机详情`;

    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    // const { list } = this.state;

    return (
      <div>
        <Card title={title}>
          <Form onSubmit={this.handleSubmit} style={{ maxWidth: '500px' }}>
            <FormItem label="姓名" {...formItemLayout}>
              {getFieldDecorator('name', {
                rules: [{ required: true }],
              })(<Input placeholder="请输入" />)}
            </FormItem>

            <FormItem label="出生年月" {...formItemLayout}>
              {getFieldDecorator('age', {
                rules: [{ required: true }],
              })(<MonthPicker placeholder="请输入出生日期" />)}
            </FormItem>

            <FormItem label="联系方式" {...formItemLayout}>
              {getFieldDecorator('tel', {
                rules: [{ required: true }, { pattern: /^1[0-9]{10}$/ }],
              })(<Input type="number" placeholder="请输入联系方式" />)}
            </FormItem>

            <FormItem label="健康状况" {...formItemLayout}>
              {getFieldDecorator('health', {
                rules: [{ required: true }],
              })(<Input placeholder="请输入健康状况" />)}
            </FormItem>

            <FormItem label="所属线路" {...formItemLayout}>
              {getFieldDecorator('line', {
                rules: [{ required: true }],
              })(<Input placeholder="请输入线路" />)}
            </FormItem>

            <FormItem label="初始密码" {...formItemLayout}>
              {getFieldDecorator('password', {
                rules: [{ required: true }],
              })(<Input placeholder="请输入初始密码" />)}
            </FormItem>

            <FormItem label="家庭住址" {...formItemLayout}>
              {getFieldDecorator('address', {
                rules: [{ required: true }],
              })(<TextArea rows="3" placeholder="请输入家庭住址" />)}
            </FormItem>

            <FormItem wrapperCol={{ offset: 8 }}>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    );
  }
}
